<template>
  <div class="quality-data-container">
    <h3 class="section-title">质量监测数据</h3>
    <el-table :data="data" border stripe style="width: 100%">
      <el-table-column prop="workOrderNumber" label="工单号" sortable width="180" />
      <el-table-column prop="itemNumber" label="品号" sortable width="200" />
      <el-table-column prop="defectType" label="不良类别" width="120">
        <template #default="scope">
          <el-tag v-if="scope.row.defectType" type="danger">{{ scope.row.defectType }}</el-tag>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="单位" width="80" />
      <el-table-column prop="inputQuantity" label="投入数量" align="right" header-align="center" />
      <el-table-column prop="outputQuantity" label="产出数量" align="right" header-align="center" />
      <el-table-column prop="defectiveQuantity" label="不良数量" align="right" header-align="center">
        <template #default="scope">
            <span style=" font-weight: bold;color: red;">{{ scope.row.defectiveQuantity }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="abnormalSituation" label="异常情况" show-overflow-tooltip />
    </el-table>
  </div>
</template>

<script setup lang="ts">

import { QualityMonitoringDataVO } from '@/api/qualitymonitoringdata';
import { ElTable, ElTableColumn, ElTag } from 'element-plus';


// 定义 props
defineProps<{
  data: QualityMonitoringDataVO[];
}>();
</script>

<style scoped>
.quality-data-container {
  margin-top: 20px;
}

.section-title {
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: bold;
  color: #303133;
}
</style>